<template>
  <div
    class="content-wrapper"
    v-loading.fullscreen.lock="fullscreenLoading"
    :before-close="handleClose"
  >
    <el-row class="content-row">
      <el-form ref="addForm" :model="addForm" :rules="addRules" label-width="100px">
        <el-row>
          <el-col :span="20">
            <!-- <el-form-item label="话题位置" prop="position">
              <el-select
                v-model="addForm.position"
                style="width: 100%"
                filterable
                clearable
                placeholder="请选择话题位置"
              >
                <el-option v-for="(k,v) in positions" :key="v" :label="k" :value="v"></el-option>
              </el-select>
            </el-form-item> -->
            <el-form-item label="上架时间" prop="time">
              <el-date-picker
                style="width:100%"
                v-model="addForm.time"
                type="datetimerange"
                range-separator="至"
                start-placeholder="话题上架时间"
                end-placeholder="话题下架时间"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="投放城市" prop="cityName">
              <el-input v-model="addForm.cityName" @focus="viewCity"></el-input>
            </el-form-item>
            <el-form-item label="话题主题" prop="subject">
              <el-input v-model="addForm.subject" maxlength="20" placeholder="建议13个中文字内，最多不超过20字"></el-input>
            </el-form-item>
            <el-form-item label="话题导语" prop="introduction">
              <el-input
                type="textarea"
                rows="8"
                maxlength="200"
                v-model="addForm.introduction"
                placeholder="最过不超过200字，不支持特殊符号"
              ></el-input>
            </el-form-item>
            <el-form-item label="话题配图" prop="image">
              <el-upload
                :action="uploadUrl"
                list-type="picture-card"
                :class="{disabled:uploadNumPro==1}"
                :limit="limit"
                :on-preview="handlePreviewAvatarUpload"
                :on-success="successAvatarUpload"
                :before-upload="beforeSingleAvatarUpload"
                :on-remove="handleRemoveAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="isPreview" size="tiny" append-to-body>
                <img width="100%" :src="previewUrl" alt />
              </el-dialog>
              <div>图片建议尺寸:88x88像素,大小&lt;=200KB</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-row>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="closeTab">取 消</el-button>
      <el-button type="primary" @click="saveForm('addForm',1)">保存</el-button>
      <el-button type="primary" @click="saveForm('addForm',3)">发布</el-button>
    </div>

    <city-tree v-if="treeDialog" @handleclose="viewinf" />
  </div>
</template>

<script>
import CityTree from "../../../common/CityTree";
import { addSubject } from "../../../../api/bbs/subject";

export default {
  name: "advertiseAdd",
  data() {
    return {
      treeDialog: false,
      positions: {},
      fullscreenLoading: false,
      uploadUrl: "https://lht.ah-zk.com/qjt/fs/file/upload",
      origin: "https://lht.ah-zk.com/qjt/fs/origin",
      previewUrl: "",
      isPreview: false,
      uploadNumPro: 0,
      limit: 1,
      picList: [],
      addForm: {
        position: "1",
        cityName: "",
        time: [],
        subject: "",
        introduction: "",
        image: "",
        cityList: []
      },
      addRules: {
        position: [
          {
            required: true,
            message: "请选择话题位置",
            trigger: ["blur", "change"]
          }
        ],
        subject: [
          {
            required: true,
            message: "请输入话题主题",
            trigger: ["blur", "change"]
          }
        ],
        introduction: [
          {
            required: true,
            message: "请输入话题导语",
            trigger: ["blur", "change"]
          }
        ],
        cityName: [
          {
            required: true,
            message: "请选择发布城市",
            trigger: ["blur", "change"]
          }
        ],
        image: [
          {
            required: true,
            message: "请上传话题配图",
            trigger: ["blur", "change"]
          }
        ],
        time: [
          {
            required: true,
            message: "上架时间不能为空",
            trigger: ["blur", "change"]
          }
        ]
      }
    };
  },
  created() {
    this.enumMap('SubjectEnum.PositionEnum','com.zlll.winner.enums.bbs').then(res=>{if(res) this.positions = res });
  },
  components: {
    CityTree
  },
  methods: {
    handlePreviewAvatarUpload(file) {
      console.log("handlePreviewAvatarUpload===>", file);
      this.previewUrl = file.url;
      this.isPreview = !this.isPreview;
    },
    successAvatarUpload(res, file) {
      let image = res.files[0];
      let imageUrl = this.origin.concat("/", image.fingerprint);
      this.previewUrl = imageUrl;
      this.addForm.image = image.fingerprint;
      this.uploadNumPro = 1;
      console.log("uploadNumPro===>", this.uploadNumPro);
    },
    handleRemoveAvatarUpload(file, fileList) {
      this.uploadNumPro = 0;
      console.log("uploadNumPro===>", this.uploadNumPro);
    },
    closeTab() {
      this.$emit("handleClose");
    },
    viewCity() {
      this.treeDialog = !this.treeDialog;
    },
    viewinf(e) {
      this.treeDialog = !this.treeDialog;
      console.log("viewinf==>", e);
      this.addForm.cityList = e;
      this.addForm.cityName = e
        .map(item => {
          return item.cityName;
        })
        .join(",");
    },
    saveForm(formName, status) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.fullscreenLoading = true;
          this.addForm.beginTime = new Date(this.addForm.time[0]).getTime();
          this.addForm.endTime = new Date(this.addForm.time[1]).getTime();
          this.addForm.status = status;
          addSubject(this.addForm).then(res => {
            if (res.code == "0") {
              this.fullscreenLoading = false;
              this.$message({ message: "新增成功", type: "success" });
              this.resetForm("addForm");
              this.$emit("saveClose");
            } else {
              this.fullscreenLoading = false;
              this.$message({ message: res.data.msg, type: "error" });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    }
  }
};
</script>

<style lang="stylus" scoped>
.content-wrapper {
  height: 100%;
  overflow-y: scroll;
}

.content-row {
  height: 94%;
  overflow-y: scroll;
}

.imageFloatLeft {
  width: 40%;
  float: left;
  height: 140px;
  margin-right: 2%;
}

.dialog-footer {
  text-align: center;
}
</style>
